<template>
  <div class="colWrapper">
    <!--  面包屑  -->
    <div class="breadCrumb">
      <Breadcrumb>
        <BreadcrumbItem>机器管理</BreadcrumbItem>
        <BreadcrumbItem>机器详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="colWrapper infoContent">
      <div class="rowWrapper titleCon">
        <span>机器详情：（查看/编辑机器信息）</span>
      </div>
      <div class="rowWrapper bodyCon">
        <div class="colWrapper body-left">
          <div class="rowWrapper item">
            <span>机器名：</span>
          </div>
          <div class="rowWrapper item">
            <span>机器组经理：</span>
          </div>
          <div class="rowWrapper item">
            <span>所属机器组：</span>
          </div>
          <div class="rowWrapper item">
            <span>地址：</span>
          </div>
          <div class="rowWrapper item">
            <span>所属门店：</span>
          </div>
          <div class="rowWrapper item">
            <span>机器状态：</span>
          </div>
          <div class="rowWrapper item">
            <span>摄像头A：</span>
          </div>
          <div class="rowWrapper item">
            <span>摄像头B：</span>
          </div>
          <div class="rowWrapper item">
            <span>门锁：</span>
          </div>
          <div class="rowWrapper item">
            <span>温度：</span>
          </div>
          <div class="rowWrapper item">
            <span>是否离线：</span>
          </div>
          <div class="rowWrapper item">
            <span>创建时间：</span>
          </div>
        </div>
        <div class="colWrapper body-right">
          <div class="rowWrapper item">
            <span>机器编号：</span>
          </div>
          <div class="rowWrapper item">
            <span>机器温度：</span>
          </div>
          <div class="rowWrapper item">
            <span>经度：</span>
          </div>
          <div class="rowWrapper item">
            <span>纬度：</span>
          </div>
          <div class="rowWrapper item">
            <span>机器识别码：</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../style/main.css'

export default {
  data() {
    return {
      infoList: [
        {
          'title': '机器名'
        }
      ]
    }
  }
};
</script>

<style scoped>
.breadCrumb {
  align-self: flex-start;
}

.infoContent {
  width: 588px;
  height: 840px;
  margin-top: 20px;
  border-radius: 16px;
  padding: 33px;
  background-color: rgba(229, 229, 229, 1);
}

.titleCon {
  align-self: flex-start;
}

.titleCon > span {
  color: rgba(80, 80, 80, 1);
  font-size: 30px;
  font-weight: bold;
}

.bodyCon {
  margin-top: 20px;
  width: 100%;
  margin-left: 100px;
}

.body-left, .body-right {
  width: 50%;
  height: 100%;
  align-items: flex-start;
}

.item {
  margin-top: 20px;
}
</style>
